{#
/**
 * @file
 * Theme override for comment fields.
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - label_hidden: Whether to show the field label or not.
 * - title_attributes: HTML attributes for the title.
 * - label: The label for the field.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional title output populated by modules, intended to
 *   be displayed after the main title tag that appears in the template.
 * - comments: List of comments rendered through comment.html.twig.
 * - comment_count: Count of comments rendered through comment.html.twig.
 * - content_attributes: HTML attributes for the form title.
 * - comment_form: The 'Add new comment' form.
 * - comment_display_mode: Is the comments are threaded.
 * - comment_type: The comment type bundle ID for the comment field.
 * - entity_type: The entity type to which the field belongs.
 * - field_name: The name of the field.
 * - field_type: The type of the field.
 * - label_display: The display settings for the label.
 *
 * @see template_preprocess_field()
 * @see comment_preprocess_field()
 */
#}

<section class="my-2 p-4 rounded-sm bg-white">
  <div class="inline-flex items-center">
    <div class="w-10 h-10 rounded-full mr-4">
      {% if user_picture %}
        {{ user_picture }}
      {% else %}
        <img src="{{ base_path }}/themes/custom/drupal-theme-beginner/images/default-avatar.svg" alt="Default Avatar" />
      {% endif %}
    </div>
    <h2 class="text-sky-500">{{ label }}</h2>
  </div>
  {% if comment_form %}
      <div class="mx-auto">
        {{ comment_form }}
      </div>
  {% endif %}

  {{ comments }}
</section>

